<template>
	<view class="container">
		<u-empty v-if="!finishLoad" text="加载中。。。" />
		<view style="" class="content" v-else>
			<!-- 内容区  -->
			<view class="form" style="padding: 0 30rpx 40rpx; background-color: #fff; height: 100vh">
				<u-tabs
					:list="[
						{
							name: `基础信息`,
							value: 0
						},
						{
							name: `业务信息`,
							value: 2
						},
						{
							name: `其他信息`,
							value: 3
						},
						{
							name: `手机端展示`,
							value: 4
						}
					]"
					@click="onTabClick"
					lineColor="#f3c45d"
					:activeStyle="{ color: '#f3c45d' }"
				></u-tabs>

				<!-- 		<uni-section  v-if="current == 0"  title="基础信息" title-color="#f3c45d" titleFontSize="32rpx">
					<template #decoration>
						<view class="decoration"></view>
					</template>
				</uni-section> -->
				<scroll-view scroll-y style="height: calc(100vh - 88rpx - 140rpx)">
					<view v-if="current == 0">
						<li-form>
							<li-form-item label="菜品名称">
								<li-input v-model="form.name" rule="trim" />
							</li-form-item>
							<li-form-item label="菜品别名" name="byName">
								<li-input type="text" v-model="form.byName" />
							</li-form-item>
							<li-form-item label="数字助记码" name="helpCode">
								<li-input rule="trim" type="text" v-model="form.helpCode" />
							</li-form-item>

							<!-- 菜品分类 -->
							<li-form-item label="菜品分类" name="foodTypeId">
								<view
									style="width: 100%; flex: 1; border: 1px solid #cacaca; border-radius: 5px; background-color: #fff; padding: 3px 5px"
									@click="$refs.foodCategoryTreeSelector._show()"
								>
									{{ form.foodTypeName }}
								</view>
							</li-form-item>

							<!-- 菜品类型 -->
							<li-form-item label="菜品类型" name="type">
								<li-picker style="flex: 1" v-model="form.type" :rangeList="foodTypeEnum" :range-key="'name'" />
							</li-form-item>
							<!-- 是否原料 -->
							<li-form-item v-if="form.type != 2" label="是否原料" :border="false">
								<!-- <radio-group @change="radioIsGoodsChange">
              <label style="margin-right: 30rpx">
                <radio :value="1" :active-background-color="'#edac2f'" :checked="form.detail.isGoods == 1" />
                <text>是</text>
              </label>
              <label>
                <radio :value="0" :checked="form.detail.isGoods == 0" />
                <text>否</text>
              </label>
            </radio-group> -->
								<u-radio-group iconSize="14" v-model="form.detail.isGoods">
									<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
									<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
								</u-radio-group>
							</li-form-item>
							<!-- 商品类别 -->
							<li-form-item v-if="form.detail.isGoods == 1 && form.type != 2" label="商品类别">
								<view
									:style="{
										color: form.detail.goodsCategoryName ? '#343434' : '#ccc'
									}"
									@click="$refs.treeSelector._show()"
									style="width: 100%; flex: 1; border: 1px solid #cacaca; border-radius: 5px; background-color: #fff; padding: 3px 5px"
								>
									{{ form.detail.goodsCategoryName || '请选择商品类别' }}
								</view>
							</li-form-item>
						</li-form>
						<!-- 占位符 -->
						<!-- <view style="height: 40rpx"></view> -->
						<!-- 	<uni-section  v-if="current == 1" title="菜品构成" title-color="#f3c45d" titleFontSize="32rpx">
					<template #decoration>
						<view class="decoration"></view>
					</template>
				</uni-section> -->

						<!-- 菜品规格 -->
						<li-form>
							<view class="form-item" style="justify-content: space-between; flex: 1; margin-top: 8px">
								<view class="lbl lbl-title">菜品规格</view>
								<view
									class="form-item-right"
									style="display: flex; flex: unset; justify-content: flex-end; color: #fff; background-color: #fca700; padding: 0 20rpx; border-radius: 20rpx"
									@click="specAddClick"
								>
									新增
								</view>
							</view>
							<view class="spec-container">
								<block v-if="form.speclist.length > 0">
									<view
										class="spec-body"
										:style="{
											border: form.speclist.length > 0 ? '2rpx solid #dfe2e5' : '2rpx solid transparent'
										}"
									>
										<view>
											<view class="items" style="border-bottom: 1px solid #dfe2e5; padding: 8px 0; background-color: #dfe2e5">
												<view class="is-default" style="background-color: #dfe2e5">是否默认</view>
												<view class="spec-name">规格名称</view>
												<view class="price">基础价/会员价</view>
												<view class="btns">操作</view>
											</view>
										</view>
										<view v-for="(item, index) in form.speclist" :key="item.id" class="items">
											<view class="is-default">
												<text
													class="btn"
													:class="{
														'is-default-active': item.isDefault
													}"
													@click="setDefaultClick(index)"
													style="border-radius: 10rpx"
													:style="{
														border: item.isDefault ? '1px solid transparent' : '1px solid #c3c3c2'
													}"
												>
													{{ item.isDefault ? '默认' : '设为默认' }}
												</text>
											</view>
											<view class="spec-name">{{ item.specName }}</view>
											<view class="price">￥{{ item.posPrice }}/{{ item.vipPrice == null ? '--' : item.vipPrice }}</view>
											<view class="btns">
												<text class="edit-btn" @click="btnEditSpecClick(index)">编辑</text>
												<text class="btn btn-del" @click="btnDelItemClick(index)" style="margin-left: 8px" v-if="!item.isDefault">删除</text>
											</view>
										</view>
									</view>
								</block>
								<view v-else style="padding: 8px 4px">暂无菜品规格，请点击右上角添加~~</view>
							</view>

							<!-- 是套菜时显示 -->
							<!-- 套餐分组  -->
							<block v-if="form.type == 2">
								<view class="form-item" style="justify-content: space-between; flex: 1">
									<view class="lbl" style="font-weight: 600; flex: unset; font-size: 16px; flex: 1; width: fit-content">套餐明细</view>
									<view
										class="form-item-right"
										style="
											display: flex;
											flex: unset;
											justify-content: flex-end;
											color: #fff;
											padding: 0 20rpx;
											background-color: #fca700;
											border-radius: 20rpx;
										"
										@click="addPackage"
									>
										新增套餐分组
									</view>
								</view>
								<block v-if="form.packlist.length > 0">
									<block v-for="(pack, idx1) in form.packlist" :key="pack.id">
										<view class="spec-container">
											<view class="spec-header">
												<text style="font-weight: bold; flex: 1">
													<!--  分组名称: -->
													{{ pack.name == '' ? '无' : pack.name }}
												</text>
												<text style="color: #a8a7a7" @click="delCataClick(idx1)">删除分组</text>
												<text style="color: #f3c45d; margin-left: 10px" @click="addFoodClick(idx1)">添加菜品</text>
												<text style="color: #f76409; margin-left: 10px" @click="editCataClick(idx1)">编辑</text>
											</view>

											<view
												class="spec-body"
												:style="{
													border: pack.packdetails.length > 0 ? '2rpx solid #dfe2e5' : '2rpx solid transparent'
												}"
											>
												<block v-if="pack.packdetails.length > 0">
													<view>
														<view class="items" style="border-bottom: 1px solid #dfe2e5; padding: 8px 0; background-color: #dfe2e5">
															<view class="is-default" style="background-color: #dfe2e5">菜品名称</view>
															<view class="spec-name">数量</view>
															<view class="price">单价</view>
															<view class="btns">操作</view>
														</view>
													</view>
													<!-- 每一项 -->
													<view v-for="(item, idx2) in pack.packdetails" :key="item.id" class="items">
														<view class="is-default">
															<text>
																{{ item.foodName }}
															</text>
														</view>
														<view class="spec-name">{{ item.quantity }}</view>
														<view class="price">{{ item.setPrice }}</view>
														<view class="btns">
															<text class="edit-btn" @click="btnEditTaocaiClick(idx1, idx2)">编辑</text>
															<text class="btn btn-del" @click="btnDelTaocaiItemClick(idx1, idx2)" style="margin-left: 10px" v-if="!item.isDefault">
																删除
															</text>
														</view>
													</view>
												</block>
												<block v-else>
													<view><u-empty text="当前套餐菜品为空"></u-empty></view>
												</block>
											</view>
										</view>
									</block>
								</block>
								<block v-else>
									<view style="background-color: #fff; border-radius: 8px">
										<u-empty text="当前套餐分组为空"></u-empty>
									</view>
								</block>
							</block>

							<!-- 做法 -->
							<view class="form-item" style="justify-content: space-between; flex: 1">
								<view class="lbl lbl-title">做法</view>
								<view
									class="form-item-right"
									style="display: flex; flex: unset; justify-content: flex-end; color: #fff; background-color: #fca700; padding: 0 20rpx; border-radius: 20rpx"
									@click="openPopupAddTask"
								>
									新增
								</view>
							</view>
							<view class="spec-container">
								<view
									class="spec-body"
									:style="{
										border: form.tasklist.length > 0 ? '2rpx solid #dfe2e5' : '2rpx solid transparent'
									}"
								>
									<block v-if="form.tasklist.length > 0">
										<view>
											<view class="items" style="border-bottom: 1px solid #dfe2e5; background-color: #dfe2e5; padding: 8px 0">
												<view class="is-default" style="background-color: #dfe2e5">做法名称</view>
												<view class="spec-name task-price">金额</view>
												<view class="price task-option">是否必选</view>
												<view class="price task-option">默认推荐</view>
												<view class="btns task-btn">操作</view>
											</view>
										</view>
										<view v-for="(item, index) in form.tasklist" :key="item.id" class="items">
											<view class="is-default">
												<text>
													{{ item.taskName }}
												</text>
											</view>
											<view class="spec-name task-price">
												{{ item.taskPrice }}
											</view>
											<view class="price task-option">
												<u-switch size="20" v-model="form.tasklist[index].isSelectType" activeColor="#f3c45d"></u-switch>
												<!-- {{ item.selectType == 1 ? "是" : "否" }} -->
											</view>
											<view class="price task-option">
												<u-switch size="20" v-model="form.tasklist[index].isDefault" activeColor="#f3c45d"></u-switch>
											</view>
											<view class="btns task-btn">
												<text class="btn btn-del" @click="btnDelTaskItemClick(index)" style="margin-left: 8px">删除</text>
											</view>
										</view>
									</block>
									<block v-else>暂无做法，请点击右上角添加~~</block>
								</view>
							</view>

							<!-- 加料 -->
							<view class="form-item" style="justify-content: space-between; flex: 1">
								<view class="lbl lbl-title">加料</view>
								<view
									class="form-item-right"
									style="display: flex; flex: unset; justify-content: flex-end; color: #fff; background-color: #fca700; padding: 0 20rpx; border-radius: 20rpx"
									@click="openPopupAddFeed"
								>
									新增
								</view>
							</view>

							<view class="spec-container">
								<view
									class="spec-body"
									:style="{
										border: form.feedlist.length > 0 ? '2rpx solid #dfe2e5' : '2rpx solid transparent'
									}"
								>
									<block v-if="form.feedlist.length > 0">
										<view>
											<view class="items" style="border-bottom: 1px solid #dfe2e5; background-color: #dfe2e5; padding: 8px 0">
												<view class="is-default" style="background-color: #dfe2e5">名称</view>
												<view class="spec-name">金额</view>
												<view class="price">默认推荐</view>
												<view class="btns">操作</view>
											</view>
										</view>
										<view v-for="(item, index) in form.feedlist" :key="item.id" class="items">
											<view class="is-default">
												<text>
													{{ item.feedName }}
												</text>
											</view>
											<view class="spec-name">{{ item.feedPrice }}</view>
											<view class="price">
												<u-switch size="20" v-model="form.feedlist[index].isDefault" activeColor="#f3c45d"></u-switch>
											</view>
											<view class="btns">
												<text class="btn btn-del" @click="btnDelFeedItemClick(index)" style="margin-left: 8px">删除</text>
											</view>
										</view>
									</block>
									<block v-else>暂无加料，请点击右上角添加~~</block>
								</view>
							</view>
						</li-form>
						<!-- 占位符 -->
						<!-- <view style="height: 40rpx"></view> -->
						<!-- 		<uni-section title="其他信息" title-color="#f3c45d" titleFontSize="32rpx">
					<template #decoration>
						<view class="decoration"></view>
					</template>
				</uni-section> -->
						<!-- 支持业务 -->
					</view>
					<li-form v-if="current == 2">
						<li-form-item label="支持业务" required :border="false">
							<u-checkbox-group v-model="form.businessObject" :activeColor="'#edac2f'">
								<u-checkbox
									:customStyle="{ marginBottom: '8px' }"
									v-for="(item, index) in businessTypeList"
									:key="item.value"
									:label="item.text"
									:name="item.value"
								></u-checkbox>
							</u-checkbox-group>

							<!--   <checkbox-group>
              <label
                v-for="(item, index) in businessTypeList"
                :key="index"
                style="margin-right: 30rpx"
              >
                <checkbox
                  value="cb"
                  :checked="form.businessObject.some((bo) => bo == item.value)"
                />
                {{ item.text }}
              </label>
            </checkbox-group> -->
						</li-form-item>

						<!-- 称重菜 -->
						<li-form-item label="称重菜" name="weighType" :border="false">
							<!-- <radio-group name="weighType" @change="radioWeighTypeChange">
              <label style="margin-right: 30rpx">
                <radio :value="1" :checked="form.detail.weighType == 1" />
                <text>是</text>
              </label>
              <label>
                <radio :value="0" :checked="form.detail.weighType == 0" />
                <text>否</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.detail.weighType">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
							</u-radio-group>
						</li-form-item>

						<!-- 菜单状态 -->
						<li-form-item label="菜单状态" name="sellStatus" :border="false">
							<!-- <radio-group name="sellStatus" @change="radioSellStatusChange">
              <label v-for="(item, index) in sellStatusEnum" :key="item.value" style="margin-right: 30rpx">
                <radio :value="item.value" :checked="form.sellStatus == item.value" />
                <text>{{ item.text }}</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.sellStatus">
								<u-radio
									size="20"
									v-for="(item, index) in sellStatusEnum"
									:key="item.value"
									activeColor="#edac2f"
									:customStyle="{ marginRight: '8px', marginTop: '12rpx' }"
									:label="item.text"
									:name="item.value"
								></u-radio>
							</u-radio-group>
						</li-form-item>

						<!-- 微点餐状态 -->
						<li-form-item label="微点餐状态" name="mallStatus" :border="false">
							<!-- <radio-group name="mallStatus" @change="radioMallStatusChange">
              <label style="margin-right: 30rpx">
                <radio :value="1" :checked="form.mallStatus == 1" />
                <text>是</text>
              </label>
              <label style="margin-right: 30rpx">
                <radio :value="0" :checked="form.mallStatus == 0" />
                <text>否</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.mallStatus">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
							</u-radio-group>
						</li-form-item>

						<!-- 收银端临时改价 -->
						<li-form-item label="收银端临时改价" name="isChangePrice" :border="false">
							<!-- <radio-group name="isChangePrice" @change="radioIsChangePriceChange">
              <label :key="item.value" style="margin-right: 30rpx">
                <radio :value="true" :checked="form.detail.isChangePrice" />
                <text>是</text>
              </label>
              <label :key="item.value" style="margin-right: 30rpx">
                <radio :value="false" :checked="!form.detail.isChangePrice" />
                <text>否</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.detail.isChangePrice">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="true"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="false"></u-radio>
							</u-radio-group>
						</li-form-item>
						<!-- 收银端手动打折 -->
						<li-form-item label="收银端手动打折" name="isDiscount" :border="false">
							<!-- <radio-group name="isDiscount" @change="radioIsDiscountChange">
              <label :key="item.value" style="margin-right: 30rpx">
                <radio :value="true" :checked="form.detail.isDiscount" />
                <text>是</text>
              </label>
              <label :key="item.value" style="margin-right: 30rpx">
                <radio :value="false" :checked="!form.detail.isDiscount" />
                <text>否</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.detail.isDiscount">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="true"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="false"></u-radio>
							</u-radio-group>
						</li-form-item>

						<!-- 出品部门 -->
						<li-form-item label="出品部门" name="departType" :border="false">
							<!-- <radio-group name="departType" @change="radioDepartTypeChange">
              <label style="margin-right: 30rpx">
                <radio :value="0" :checked="form.detail.departType == 0" />
                <text>与菜品一致</text>
              </label>
              <label style="margin-right: 30rpx">
                <radio :value="1" :checked="form.detail.departType == 1" />
                <text>自定义</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.detail.departType">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="与菜品一致" :name="0"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="自定义" :name="1"></u-radio>
							</u-radio-group>
						</li-form-item>

						<!-- 设置出品部门 -->
						<li-form-item v-if="form.detail.departType == 1" label="设置出品部门" style="font-size: 12px">
							<li-picker style="font-size: 14px" v-model="form.detail.departId" :range-list="departmentList" :range-key="'name'"></li-picker>
						</li-form-item>
					</li-form>
					<li-form v-if="current == 3">
						<!-- 保质期 -->
						<li-form-item label="保质期" name="warrantyValue">
							<li-input type="number" v-model="form.detail.warrantyValue" rule="int" />
						</li-form-item>

						<!-- 保质期单位 -->
						<li-form-item label="保质期单位" name="warrantyType">
							<li-picker style="flex: 1" v-model="form.detail.warrantyType" :rangeList="warrantyTypeList" :rangeKey="'text'" :rangeValue="'id'"></li-picker>
						</li-form-item>

						<!-- 组织机构 -->
						<li-form-item label="组织机构" name="organizationId" :border="false">
							<li-picker v-model="form.organizationId" :rangeList="sysOrganizationList" :rangeKey="'name'"></li-picker>
						</li-form-item>

						<!-- 菜品起售份数 -->
						<li-form-item label="菜品起售份数" class="fs12">
							<li-input class="fs14" type="number" v-model="form.detail.upSell" rule="int" />
						</li-form-item>

						<!-- 增量售卖数 -->
						<li-form-item label="增量售卖数">
							<li-input type="number" v-model="form.detail.addSell" rule="int" />
						</li-form-item>

						<!-- 最低折扣 -->
						<li-form-item label="最低折扣">
							<li-input type="number" v-model="form.detail.minDiscount" rule="int" />
						</li-form-item>
						<view style="margin-left: 80px; padding: 3px 0">说明: 90表示9折, 即90%</view>

						<!-- 会员积分 -->
						<li-form-item label="会员积分">
							<li-input type="number" v-model="form.detail.pointValue" rule="int" />
						</li-form-item>
						<!-- 积分类型 -->
						<li-form-item label="积分类型" name="pointType" :border="false">
							<!-- <radio-group name="pointType" @change="radioPointTypeChange">
              <label :key="item.value" style="margin-right: 30rpx">
                <radio :value="1" :checked="form.detail.pointType == 1" />
                <text style="font-size: 12px">分(固定积分)</text>
              </label>
              <label :key="item.value" style="margin-right: 30rpx">
                <radio :value="2" :checked="form.detail.pointType == 2" />
                <text style="font-size: 12px">%(销售额百分比)</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.detail.pointType">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="分(固定积分)" :name="1"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="%(销售额百分比)" :name="2"></u-radio>
							</u-radio-group>
						</li-form-item>

						<!-- 排序 -->
						<li-form-item label="排序">
							<li-input type="number" v-model="form.detail.sort" rule="int" />
						</li-form-item>
					</li-form>

					<!-- <view style="height: 40rpx"></view> -->
					<!-- 		<uni-section  v-if="current == 3"  title="手机端展示" title-color="#f3c45d" titleFontSize="32rpx">
					<template #decoration>
						<view class="decoration"></view>
					</template>
				</uni-section> -->
					<li-form v-if="current == 4">
						<!-- 手机端展示 -->
						<!-- 菜品图片 -->
						<li-form-item label="菜品图片" name="sort" style="margin-top: 10rpx" :border="false">
							<!-- <li-upload-img :isSinglePic="true" :imgUrl="form.detail.image" @afterChooseImage="afterChooseImage" @deleteImg="deleteImg" /> -->
							<image
								style="height: 300rpx; width: 300rpx"
								:src="form.detail.image ? form.detail.image : require('@/static/images/classify/imgs.png')"
								@click="onEditImage"
							/>
						</li-form-item>
						<!-- 手机点餐端展示 -->
						<li-form-item label="手机点餐端展示" label-width="120" name="isShow" :border="false">
							<!-- <radio-group name="isShow" @change="radioIsShowChange">
              <label style="margin-right: 30rpx">
                <radio :value="true" :checked="form.detail.isShow" />
                <text>是</text>
              </label>
              <label style="margin-right: 30rpx">
                <radio :value="false" :checked="!form.detail.isShow" />
                <text>否</text>
              </label>
            </radio-group> -->
							<u-radio-group iconSize="14" v-model="form.detail.isShow">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="true"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="false"></u-radio>
							</u-radio-group>
						</li-form-item>

						<!-- 菜品描述 -->
						<li-form-item label="菜品描述" name="sort">
							<li-textarea v-model="form.detail.remark" placeholder="最多50字,在手机点餐端展示" />
						</li-form-item>

						<li-form-item label="菜品详细描述" name="remarkDetail">
							<li-textarea v-model="form.detail.remarkDetail" />
						</li-form-item>
					</li-form>
					<!-- 编辑模式 -->
				</scroll-view>
				<view
					v-if="mode == 'edit'"
					class="btn-group"
					style="
						display: flex;
						align-items: center;
						position: fixed;
						background-color: #fff;
						left: 0rpx;
						right: 0rpx;
						padding: 0 60px;
						bottom: 0;
						height: 70px;
						z-index: 666;
					"
				>
					<view
						@click="btnDelClick"
						style="
							display: flex;
							flex: 1;
							margin-right: 10px;
							align-items: center;
							justify-content: center;
							height: 70rpx;
							font-size: 28rpx;
							background-color: #f56c6c;
							letter-spacing: 3px;
							color: #fff;
							font-weight: bold;
							border-radius: 10px;
						"
						size="mini"
					>
						删除
					</view>
					<view
						@click="btnEditSubmitClick"
						style="
							display: flex;
							flex: 1;
							margin-left: 10px;
							align-items: center;
							justify-content: center;
							height: 70rpx;
							font-size: 28rpx;
							background-color: #f3c45d;
							letter-spacing: 3px;
							color: #fff;
							font-weight: bold;
							border-radius: 10px;
						"
						size="mini"
					>
						保存
					</view>
				</view>
				<!-- 新增模式 -->
				<view v-else class="btn-group">
					<view @click="btnEditSubmitClick" class="btn-save" size="mini">添加</view>
				</view>
			</view>
		</view>

		<!-- 菜品规格 弹窗 -->
		<u-popup :show="show" @close="close" @open="open" mode="center" :closeable="true" round="10">
			<scroll-view scroll-y>
				<view style="margin: 30rpx">
					<view style="text-align: center; font-weight: bold; padding-bottom: 30rpx">
						{{ type == 'add' ? '添加菜品规格' : '编辑菜品规格' }}
					</view>

					<!--  添加菜品规格  -->
					<li-form v-if="type == 'add'">
						<li-form-item label="是否默认" name="isDefault" :border="false">
							<u-radio-group iconSize="14" v-model="AddSpecItem.isDefault">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="true"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="false"></u-radio>
							</u-radio-group>
						</li-form-item>
						<li-form-item label="规格名称">
							<li-input rule="trim" type="text" v-model="AddSpecItem.specName" />
						</li-form-item>
						<li-form-item label="基础价格" name="posPrice">
							<view style="display: flex">
								<li-input v-model="AddSpecItem.posPrice" type="digit" rule="float" />
								<text style="margin-left: 5px; font-size: 14px">元</text>
							</view>
						</li-form-item>
						<li-form-item label="会员价格" name="vipPrice">
							<view style="display: flex">
								<li-input v-model="AddSpecItem.vipPrice" type="digit" rule="float" />
								<text style="margin-left: 5px; font-size: 14px">元</text>
							</view>
						</li-form-item>
						<li-form-item label="预估成本" name="purPrice">
							<view style="display: flex">
								<li-input style="flex: 1" v-model="AddSpecItem.purPrice" type="digit" rule="float" />
								<text style="margin-left: 5px; font-size: 14px">元</text>
							</view>
						</li-form-item>
						<li-form-item label="条形码" name="code">
							<li-input type="text" v-model="AddSpecItem.code" rule="trim" />
						</li-form-item>
					</li-form>
					<!-- 编辑菜品规格 -->
					<li-form v-else>
						<li-form-item label="是否默认" :border="false">
							<u-radio-group iconSize="14" v-model="EditSpecItem.isDefault">
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="true"></u-radio>
								<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="false"></u-radio>
							</u-radio-group>
						</li-form-item>
						<li-form-item label="规格名称">
							<li-input rule="trim" v-model="EditSpecItem.specName" />
						</li-form-item>
						<li-form-item label="基础价格" name="posPrice">
							<view style="display: flex">
								<li-input style="flex: 1" type="digit" v-model="EditSpecItem.posPrice" />
								<text style="margin-left: 5px; font-size: 14px">元</text>
							</view>
						</li-form-item>
						<li-form-item label="会员价格" name="vipPrice">
							<view style="display: flex">
								<li-input style="flex: 1" type="digit" v-model="EditSpecItem.vipPrice" />

								<text style="margin-left: 5px; font-size: 14px">元</text>
							</view>
						</li-form-item>

						<li-form-item label="预估成本" name="purPrice">
							<view style="display: flex">
								<li-input style="flex: 1" type="digit" v-model="EditSpecItem.purPrice" />

								<text style="margin-left: 5px; font-size: 14px">元</text>
							</view>
						</li-form-item>
						<li-form-item label="条形码" name="code">
							<li-input rule="trim" v-model="EditSpecItem.code" />
						</li-form-item>
					</li-form>
				</view>
				<view style="width: 50%; margin: 10px auto; border-radius: 15rpx; overflow: hidden; height: 60rpx">
					<button
						size="mini"
						@click="btnAddClick"
						style="text-align: center; height: 60rpx; line-height: 60rpx; font-size: 28rpx; width: 100%; background-color: #f3c45d; color: #fff; border-radius: 0"
					>
						{{ type == 'add' ? '添加' : '编辑' }}
					</button>
				</view>
			</scroll-view>
		</u-popup>

		<u-popup :show="showPack" @close="closePack" @open="openPack" mode="center" :closeable="true" round="10">
			<view style="margin: 30rpx">
				<view style="text-align: center; font-weight: bold; padding-bottom: 30rpx">
					{{ type == 'add' ? '添加套菜分组' : '编辑套菜分组' }}
				</view>

				<!-- add  -->
				<uni-forms v-if="type == 'add'" ref="addTaocaiForm" :modelValue="AddTaoCaiCataForm">
					<uni-forms-item class="form-item" label="分组名称" name="name">
						<view class="lbl">分组名称:</view>
						<uni-easyinput trim class="form-item-right" type="text" v-model="AddTaoCaiCataForm.name" />
					</uni-forms-item>
					<uni-forms-item class="form-item" label="搭配方式" name="selectType">
						<view class="lbl">搭配方式:</view>
						<picker
							class="form-item-right"
							style="flex: 1"
							@change="pickerSelectTypeChange"
							v-model="AddTaoCaiCataForm.selectType"
							:range="FoodPackSelectTypeEnum"
							:range-key="'text'"
						>
							<view class="uni-easyinput">
								{{
									FoodPackSelectTypeEnum.find((item) => item.value == AddTaoCaiCataForm.selectType) == null
										? '无'
										: FoodPackSelectTypeEnum.find((item) => item.value == AddTaoCaiCataForm.selectType).text
								}}
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item v-if="AddTaoCaiCataForm.selectType == 1" class="form-item" label="最小数量" name="quantityStar">
						<view class="lbl">最小数量:</view>
						<uni-number-box v-model="AddTaoCaiCataForm.quantityStar" :min="0" :max="99999" :step="1"></uni-number-box>
						<text style="margin-left: 5px; font-size: 14px">元</text>
					</uni-forms-item>
					<uni-forms-item v-if="AddTaoCaiCataForm.selectType == 1" class="form-item" label="最大数量" name="quantityEnd">
						<view class="lbl">最大数量:</view>
						<uni-number-box v-model="AddTaoCaiCataForm.quantityEnd" :min="0" :max="99999" :step="1"></uni-number-box>
						<text style="margin-left: 5px; font-size: 14px">元</text>
					</uni-forms-item>
					<uni-forms-item v-if="AddTaoCaiCataForm.selectType == 1" class="form-item" label="可选相同菜品" name="isSelectSame">
						<view class="lbl" style="width: 200rpx">可选相同菜品:</view>
						<!-- <radio-group class="form-item-right" name="isShow" @change="radioIsSelectSameChange">
              <label style="margin-right: 30rpx">
                <radio :value="true" :checked="AddTaoCaiCataForm.isSelectSame" />
                <text>是</text>
              </label>
              <label style="margin-right: 30rpx">
                <radio :value="false" :checked="!AddTaoCaiCataForm.isSelectSame" />
                <text>否</text>
              </label>
            </radio-group> -->
						<u-radio-group iconSize="14" v-model="AddTaoCaiCataForm.isSelectSame">
							<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="true"></u-radio>
							<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="false"></u-radio>
						</u-radio-group>
					</uni-forms-item>
				</uni-forms>
				<!-- 编辑套菜分组 -->
				<uni-forms v-else ref="editTCFZForm" :modelValue="editTCFZForm">
					<uni-forms-item class="form-item" label="分组名称" name="name">
						<view class="lbl">分组名称:</view>
						<uni-easyinput primaryColor="#f3c45d" trim class="form-item-right" type="text" v-model="editTCFZForm.name" />
					</uni-forms-item>
					<uni-forms-item class="form-item" label="搭配方式" name="selectType">
						<view class="lbl">搭配方式:</view>
						<picker
							class="form-item-right"
							style="flex: 1"
							@change="pickerSelectTypeChange"
							v-model="editTCFZForm.selectType"
							:range="FoodPackSelectTypeEnum"
							:range-key="'text'"
						>
							<view class="uni-easyinput">
								{{
									FoodPackSelectTypeEnum.find((item) => item.value == editTCFZForm.selectType) == null
										? '无'
										: FoodPackSelectTypeEnum.find((item) => item.value == editTCFZForm.selectType).text
								}}
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item v-if="editTCFZForm.selectType == 1" class="form-item" label="最小数量" name="quantityStar">
						<view class="lbl">最小数量:</view>
						<uni-number-box v-model="editTCFZForm.quantityStar" :min="0" :max="99999" :step="1"></uni-number-box>

						<text style="margin-left: 5px; font-size: 14px">元</text>
					</uni-forms-item>
					<uni-forms-item v-if="editTCFZForm.selectType == 1" class="form-item" label="最大数量" name="quantityEnd">
						<view class="lbl">最大数量:</view>
						<uni-number-box v-model="editTCFZForm.quantityEnd" :min="0" :max="99999" :step="1"></uni-number-box>
						<text style="margin-left: 5px; font-size: 14px">元</text>
					</uni-forms-item>
					<uni-forms-item v-if="editTCFZForm.selectType == 1" class="form-item" label="可选相同菜品" name="isSelectSame">
						<view class="lbl" style="width: 200rpx">可选相同菜品:</view>
						<!-- <radio-group class="form-item-right" name="isShow" @change="radioIsSelectSameChange">
              <label style="margin-right: 30rpx">
                ./
                <radio :value="true" :checked="editTCFZForm.isSelectSame" />
                <text>是</text>
              </label>
              <label style="margin-right: 30rpx">
                <radio :value="false" :checked="!editTCFZForm.isSelectSame" />
                <text>否</text>
              </label>
            </radio-group> -->
						<u-radio-group iconSize="14" v-model="editTCFZForm.isSelectSame">
							<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="true"></u-radio>
							<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="false"></u-radio>
						</u-radio-group>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn-box">
				<button
					size="mini"
					@click="btnAddOrEditTCFZClick"
					style="text-align: center; height: 70rpx; line-height: 70rpx; font-size: 18px; width: 100%; background-color: #f3c45d; color: #fff; border-radius: 0"
				>
					{{ type == 'add' ? '添加' : '编辑' }}
				</button>
			</view>
		</u-popup>

		<u-popup :show="showAddFood" @close="closePopupAddFood" @open="openPopupAddFood" :closeable="true">
			<view class="layout" style="height: 90vh; width: 100vw; background-color: #f7f8fa; font-size: 12px; display: flex">
				<view class="layout-left" style="height: 100%; width: 40vw; overflow-y: scroll">
					<view style="margin: 15rpx; background-color: #fff; border-radius: 10px; padding: 8px 4px" v-for="(item, index) in foodCategoryList" :key="item.id">
						<view class="fold" style="padding: 15rpx 15rpx 15rpx 0">
							<view class="tree-icon" style="margin: 0 5px" v-show="item.fold && item.children.length > 0" @click="unfold(index)">
								<!-- 向右箭头 -->
								<image style="width: 8px; height: 8px" src="/static/images/icon/down.png"></image>
							</view>
							<view @click="unfold(index)" style="margin: 0 5px" class="tree-icon" v-show="!item.fold && item.children.length > 0">
								<!-- 向下箭头 -->
								<image style="width: 8px; height: 8px" src="/static/images/icon/right.png"></image>
							</view>
							<view
								:style="{
									color: foodCategoryId == item.id ? '#f3c45d' : '#000',
									paddingLeft: item.children.length == 0 ? '20px' : '0px'
								}"
								@click="onItemClick(item)"
							>
								{{ item.name }}
							</view>
						</view>
						<block v-if="item.fold">
							<view v-for="(item1, index1) in item.children" class="subtree" :key="item1.id" style="display: flex; padding: 15rpx 15rpx 15rpx 0">
								<view
									class="tree-content"
									style="padding-left: 30px; padding-right: 20rpx"
									:style="{
										color: foodCategoryId == item1.id ? '#f3c45d' : '#000'
									}"
									@click="onItemClick(item1)"
								>
									<text>{{ item1.name }}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="layout-right" style="height: 100%; width: 60vw; overflow-y: scroll; padding-top: 40px">
					<block v-if="foodList != null && foodList.length > 0">
						<view class="food-items" style="font-size: 12px" v-for="(food, index) in foodList" :key="index">
							<image class="image" :src="food.image" style="align-self: center" />
							<view class="right" style="padding-bottom: 0">
								<text>名称：{{ food.name }}</text>
								<view class="mt-10">
									<text style="border: 1px solid #f7f8fa">规格：{{ food.foodSpecName }}</text>
								</view>
								<view class="mt-10">
									<text>价格：</text>
									<text class="text-red">￥{{ food.posPrice }}</text>
								</view>
							</view>
							<view class="btn" style="display: flex; align-items: center">
								<text style="padding: 3px 5px; border-radius: 8px; background-color: #f3c45d; color: #fff" @click="showfoodDetailModal(food)">选择</text>
							</view>
						</view>
					</block>
					<block v-else>
						<view style="display: flex; height: 100%; justify-content: center; justify-content: center">
							<u-empty />
						</view>
					</block>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showAddTask" @close="closePopupAddTask" @open="openPopupAddTask" :closeable="true">
			<view class="layout" style="height: 90vh; width: 100vw; background-color: #f7f8fa; font-size: 12px; display: flex">
				<view class="layout-left" style="height: 100%; width: 35vw; overflow-y: scroll">
					<view
						style="margin: 15rpx; background-color: #fff; border-radius: 10px; padding: 8px 12px"
						:style="{
							color: curTaskCategoryIdx == index ? '#f3c45d' : '#000'
						}"
						@click="foodTaskCateClick(index)"
						v-for="(item, index) in foodTaskCategoryList"
						:key="item.id"
					>
						{{ item.name }}
					</view>
				</view>
				<view class="layout-right" style="height: 100%; width: 65vw; overflow-y: scroll; padding-top: 40px; padding-right: 5px">
					<block v-if="foodTaskList != null && foodTaskList.length > 0">
						<view v-for="(task, index) in foodTaskList" :key="task.id" style="display: flex; align-items: center; margin-bottom: 10px">
							<view style="flex: 1; font-weight: 900; padding-left: 12px">
								{{ task.name }}
							</view>
							<button
								size="mini"
								@click="btnTaskSelectClick(task)"
								class="btn-yellow"
								style="border-radius: 8px"
								:style="{
									'background-color': form.tasklist.some((itm) => itm.taskId == task.id) ? '#f56c6c' : '#f3c45d'
								}"
							>
								{{ form.tasklist.some((itm) => itm.taskId == task.id) ? '取消' : '选择' }}
							</button>
						</view>
					</block>
					<block v-else>
						<view style="display: flex; height: 100%; justify-content: center">
							<u-empty />
						</view>
					</block>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showAddFeed" @close="closePopupAddFeed" @open="openPopupAddFeed" :closeable="true">
			<view class="layout" style="height: 90vh; width: 100vw; background-color: #f7f8fa; font-size: 12px; display: flex">
				<view class="layout-left" style="height: 100%; width: 35vw; overflow-y: scroll">
					<view
						style="margin: 15rpx; background-color: #fff; border-radius: 10px; padding: 8px 12px"
						:style="{
							color: curFeedCategoryIdx == index ? '#f3c45d' : '#000'
						}"
						@click="foodFeedCateClick(index)"
						v-for="(item, index) in foodFeedCategoryList"
						:key="item.id"
					>
						{{ item.name }}
					</view>
				</view>
				<view class="layout-right" style="height: 100%; width: 65vw; overflow-y: scroll; padding-top: 40px; padding-right: 5px">
					<block v-if="foodFeedList != null && foodFeedList.length > 0">
						<view v-for="(feed, index) in foodFeedList" :key="feed.id" style="display: flex; align-items: center; margin-bottom: 10px">
							<view style="flex: 1; font-weight: 900; padding-left: 12px">
								{{ feed.name }}
							</view>
							<button
								size="mini"
								@click="btnFeedSelectClick(feed)"
								class="btn-yellow"
								style="border-radius: 8px"
								:style="{
									'background-color': form.feedlist.some((itm) => itm.feedId == feed.id) ? '#f56c6c' : '#f3c45d'
								}"
							>
								{{ form.feedlist.some((itm) => itm.feedId == feed.id) ? '取消' : '选择' }}
							</button>
						</view>
					</block>
					<block v-else>
						<view style="display: flex; height: 100%; justify-content: center">
							<u-empty />
						</view>
					</block>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showEditFood" @close="closePopShowEditFood" @open="openPopupShowEditFood" mode="center" :closeable="true" round="10">
			<view style="margin: 30rpx; width: 70vw">
				<view style="text-align: center; font-weight: bold; padding-bottom: 30rpx">编辑菜品</view>

				<li-form ref="editFoodForm" :modelValue="editFoodForm">
					<uni-forms-item class="form-item" label="菜品名称" name="foodName">
						<view class="lbl">菜品名称:</view>
						<view class="form-item-right">{{ editFoodForm.foodName }}</view>
					</uni-forms-item>
					<uni-forms-item class="form-item" label="规格" name="specName">
						<view class="lbl">规格:</view>
						<view class="form-item-right">{{ editFoodForm.specName }}</view>
					</uni-forms-item>
					<uni-forms-item class="form-item" label="数量" name="quantity">
						<view class="lbl">数量:</view>
						<uni-number-box max="9999" step="0.01" :min="0" v-model="editFoodForm.quantity"></uni-number-box>
					</uni-forms-item>
					<uni-forms-item class="form-item" label="套餐执行单价" name="setPrice">
						<view class="lbl" style="width: 200rpx">套餐执行单价:</view>
						<uni-number-box step="0.01" max="9999" :min="0" v-model="editFoodForm.setPrice"></uni-number-box>
						<text style="margin-left: 5px; font-size: 14px">元</text>
					</uni-forms-item>
				</li-form>
			</view>
			<view class="btn-box">
				<button
					size="mini"
					@click="btnSaveFoodClick"
					style="text-align: center; height: 70rpx; line-height: 70rpx; font-size: 18px; width: 100%; background-color: #f3c45d; color: #fff; border-radius: 0"
				>
					保存
				</button>
			</view>
		</u-popup>

		<treeSelector ref="foodCategoryTreeSelector" :range="foodCategoryList" rangeKey="name" :selectParent="true" @confirm="foodCategoryTreeConfirm" />

		<treeSelector ref="treeSelector" :range="GoodsCategoryList" rangeKey="name" :selectParent="true" @confirm="treeConfirm" />
	</view>
</template>

<script>
import { uShowLoading, uHideLoading, uNavigateTo, umodal, utoast, uSetNavigationBarTitle } from '../../../utils/uniUtils.js';
import checker from '../../../common/graceChecker';
import { transfer, transferTypeEnum } from '../../../common/dataTransfer.js';
import { checkerType, modeEnum } from '../../../constants/normalConstants.js';
import { toastIconEnum } from '../../../constants/uiConstants.js';
import { isIntegerOrNumericStringOrEmpty } from '../../../utils/stringUtils.js';
import { uploadImage } from '../../../utils/uniUtils';
import {
	GetFoodEdit,
	EditFood,
	DelFood,
	GetFoodCategoryList,
	GetSysOrganizationList,
	GetCoreCmsDepartmentList,
	GetGoodsCategoryList,
	GetFood,
	AddFood
} from '../../../common/api.js';
import { corpId, storeId } from '../../../constants/apiConstants';
import { warrantyTypeEnum, sellStatusEnum, businessTypeList, foodTypeEnum, FoodPackSelectTypeEnum } from '../../../constants/normalConstants';
import treeSelector from '@/components/tree-selector/tree-selector.vue';
import { mapState, mapMutations } from 'vuex';
import uploadImageUtils from '@/utils/uploadImage.js';
export default {
	components: {
		treeSelector
	},
	// async onLoad(options) {
	// 	this.mode = options.mode;
	// 	if (this.mode == modeEnum.edit) {
	// 		this.id = options.id;
	// 	} else {
	// 		this.transferType = options.type;
	// 		uSetNavigationBarTitle('添加菜品');
	// 	}
	// },
	computed: {
		...mapState('recognition', ['currentGoodsVuex'])
	},
	async onLoad(options) {
		this.mode = options.mode;
		if (this.mode == modeEnum.edit) {
			this.id = options.id;
		} else {
			this.transferType = options.type;
			uSetNavigationBarTitle('添加菜品');
		}
		try {
			if (this.mode == modeEnum.edit) {
				this.form = (await GetFoodEdit(this.id)).data;
			} else {
				this.form = {
					foodTypeId: 0,
					type: this.transferType,
					number: '',
					name: '',
					byName: '',
					businessType: '[1,2,3]',
					sellStatus: 1,
					mallStatus: 1,
					specFlag: false,
					foodSpecId: 547886372995142,
					isDelete: false,
					organizationId: 0,
					isModify: true,
					foodTypeName: '无',
					businessObject: [1, 2, 3],
					detail: {
						foodId: 0,
						corpId: corpId,
						storeId: storeId,
						isHeft: true,
						helpCode: '',
						pinYin: '',
						warrantyValue: 1,
						warrantyType: 0,
						isPrint: true,
						gearOpening: '',
						isChangePrice: true,
						isDiscount: true,
						minDiscount: 0.0,
						upSell: 0,
						addSell: 0,
						departId: 5,
						departType: 0,
						image: '',
						isShow: true,
						weighType: 0,
						subscript: '',
						remark: '',
						remarkDetail: '',
						sort: 0,
						pointType: 1,
						pointValue: 0.0,
						isGoods: 0,
						goodsId: 0,
						goodsCategoryName: '无'
					},
					image: '',
					speclist: [],
					tasklist: [],
					feedlist: [],
					packlist: [],
					goodsCategoryId: 0
				};
			}

			this.foodCategoryList = (await GetFoodCategoryList()).data.list;
			this.foodCategoryList.forEach((element) => {
				element.label = element.name;
				element.fold = true;
				element.active = false;
				if (element.children.length > 0) {
					element.children.map((item) => {
						item.label = item.name;
						item.fold = true;
					});
				}
			});

			if (this.foodCategoryList.length > 0) {
				this.foodCategoryList[0].active = true;
				this.form.foodTypeId = this.foodCategoryList[0].id;
				this.form.foodTypeName = this.foodCategoryList[0].name;
			}

			this.sysOrganizationList = [
				{
					name: '无',
					id: 0
				},
				...(await GetSysOrganizationList()).data.list
			];
			this.departmentList = [
				{
					name: '无',
					id: 0
				},
				...(await GetCoreCmsDepartmentList()).data.list
			];
			this.GoodsCategoryList = [
				/*    {
          id: 0,
          parentId: 0,
          name: "无",
          typeId: 0,
          sort: 0,
          children: [],
        }, */
				...(await GetGoodsCategoryList()).data
			];
			console.log(this.GoodsCategoryList, 'GoodsCategoryList');
			this.finishLoad = true;
		} catch (ex) {
			console.log(ex);
			this.finishLoad = false;
		}
	},
	data() {
		return {
			current: 0,
			mode: 'add',
			transferType: '',
			scrollTop: 0,
			showAddFeed: false,
			curTaskCategoryIdx: 0,
			foodTaskCategoryList: [], //  菜品做法分类
			foodTaskList: [], // 菜品做法分组
			curFeedCategoryIdx: 0,
			foodFeedCategoryList: [], //  菜品加料分类
			foodFeedList: [], // 菜品加料分组
			packIdx: 0, //packListIndex
			packdetailsIdx: 0, //packdetailsIdx
			foodCategoryId: 0, // Food Category Id
			foodList: [],
			editFoodForm: null,
			showEditFood: false,
			warrantyTypeList: warrantyTypeEnum, //保质期单位
			FoodPackSelectTypeEnum,
			editTCFZForm: null,
			curTCFZIdx: 0,
			GoodsCategoryList: [], // 商品类别
			id: 0,
			show: false, // 是否显示弹窗
			showCata: false, // 是否显示添加分组弹窗
			showAddFood: false,
			showAddTask: false,
			type: 'add', // 弹窗类型  add   和 edit
			finishLoad: false, // 资源是否加载完毕
			curSpecIdx: 0, // 编辑的规格下标
			foodCategoryList: [], // 菜品分类列表
			sysOrganizationList: [], // 组织机构列表
			departmentList: [], // 部门列表
			foodTypeEnum,
			AddTaoCaiCataForm: {
				name: '',
				selectType: 2,
				plateType: 0,
				quantityStar: 1,
				quantityEnd: 1,
				isSelectSame: false,
				isDelete: false,
				modifyTime: 0,
				sort: 0,
				packdetails: []
			},
			editTaoCaiCataForm: {
				name: '',
				selectType: 2,
				plateType: 0,
				quantityStar: 1,
				quantityEnd: 1,
				isSelectSame: false,
				isDelete: false,
				modifyTime: 0,
				sort: 0,
				packdetails: []
			},
			businessTypeList,
			sellStatusEnum,
			form: {
				detail: {
					image: ''
				}
			},
			AddSpecItem: {
				// 添加的菜品规格
				code: '',
				specName: '',
				onLine: true,
				isShare: false,
				createTime: '0001-01-01 00:00:00',
				isDefault: false,
				posPrice: 0.0,
				vipPrice: 0.0,
				purPrice: 0.0,
				rmoPrice: 0.0,
				mallPrice: 0.0,
				isSelected: false,
				isExclusive: false,
				price: 0.0
			},
			showPack: false,
			EditSpecItem: {
				// 添加的菜品规格
				code: '',
				specName: '',
				onLine: true,
				isShare: false,
				createTime: '0001-01-01 00:00:00',
				isDefault: false,
				posPrice: 1.0,
				vipPrice: 2.0,
				purPrice: 0.0,
				rmoPrice: 0.0,
				mallPrice: 0.0,
				isSelected: false,
				isExclusive: false,
				price: 0.0
			},
			// 规格 表单校验规则
			rules: [
				{
					name: 'specName',
					checkType: 'notnull',
					errorMsg: '商品规格不能为空'
				}
			],
			// 套菜分组 表单校验规则
			txfzRules: [
				{
					name: 'name',
					checkType: 'notnull',
					errorMsg: '套餐分组不能为空~~'
				}
			],
			// 套菜分组菜品 表单校验规则
			txfzFoodRules: [],
			//菜品 表单校验规则
			foodRules: [],
			//菜品详情 表单校验规则

			foodDetailsRules: [],

			disabled: false,
			lock: false // 节流锁
		};
	},
	onShow() {
		const that = this;
		if (that.currentGoodsVuex.from === '/pages/workbench/food/doEdit') {
			console.log(that.currentGoodsVuex.form);
			that.form = JSON.parse(JSON.stringify(that.currentGoodsVuex.form));
			that.form.detail.image = that.currentGoodsVuex.imageUrl;
			if (that.form.id) {
				that.mode = 'edit';
			} else {
				that.mode = 'add';
			}
			this.setCurrentGoods({
				index: 0,
				ind: 0,
				imageUrl: '',
				foodName: '',
				from: '',
				createList: [],
				foodList: [],
				form: {}
			});
		}
	},
	computed: {
		...mapState('recognition', ['currentGoodsVuex'])
	},
	methods: {
		...mapMutations('recognition', ['setCurrentGoods']),
		foodTaskCateClick(taskCategoryIdx) {
			if (this.curTaskCategoryIdx == taskCategoryIdx) {
				return;
			}
			this.curTaskCategoryIdx = taskCategoryIdx;
			this.GetFoodTask(this.curTaskCategoryIdx);
		},

		btnTaskSelectClick(task) {
			const res = this.form.tasklist.some((itm) => itm.taskId == task.id);
			if (res) {
				const idx = this.form.tasklist.findIndex((itm) => itm.taskId == task.id);
				this.form.tasklist.splice(idx, 1);
			} else {
				this.form.tasklist.push({
					corpId: corpId,
					storeId: storeId,
					taskId: task.id,
					isDefault: false,
					minQuantity: 0,
					maxQuantity: 0,
					selectType: 0,
					modifyTime: 0,
					taskName: task.name,
					taskPrice: task.addPriceWay,
					isSelected: false,
					isSelectType: false
				});
			}
		},

		foodFeedCateClick(feedCategoryIdx) {
			if (this.curFeedCategoryIdx == feedCategoryIdx) {
				return;
			}
			this.curFeedCategoryIdx = feedCategoryIdx;
			this.GetFoodFeed(this.curFeedCategoryIdx);
		},

		btnFeedSelectClick(feed) {
			const res = this.form.feedlist.some((itm) => itm.feedId == feed.id);
			if (res) {
				const idx = this.form.feedlist.findIndex((itm) => itm.feedId == feed.id);
				this.form.feedlist.splice(idx, 1);
			} else {
				this.form.feedlist.push({
					corpId: corpId,
					storeId: storeId,
					isDefault: false,
					selectType: 0,
					feedId: feed.id,
					minQuantity: 0,
					maxQuantity: 0,
					feedName: feed.name,
					feedPrice: feed.price,
					isSelected: false
				});
			}
		},

		/**
		 * 获取做法分类
		 */
		async GetFoodTaskCategory() {
			let {
				data: { list }
			} = await this.$api.GetFoodTaskCategory({
				pageNum: 1,
				pageSize: 9999
			});
			this.foodTaskCategoryList = list;
			if (this.foodTaskCategoryList.length > 0) {
				this.curTaskCategoryIdx = 0;
				await this.GetFoodTask();
			}
		},

		/**
		 * 获取做法
		 */
		async GetFoodTask(idx = 0) {
			if (this.foodTaskCategoryList[idx] != null) {
				let {
					data: { list }
				} = await this.$api.GetFoodTask({
					pageNum: 1,
					pageSize: 9999,
					taskTypeId: this.foodTaskCategoryList[idx].id
				});
				this.foodTaskList = list;
			}
		},

		/**
		 * 获取加料分类
		 */
		async GetFoodFeedCategory() {
			let {
				data: { list }
			} = await this.$api.GetFoodFeedCategory({
				pageNum: 1,
				pageSize: 9999
			});

			this.foodFeedCategoryList = list;
			if (this.foodFeedCategoryList.length > 0) {
				this.curFeedCategoryIdx = 0;
				await this.GetFoodFeed();
			}
		},
		/**
		 * 获取加料
		 */
		async GetFoodFeed(idx = 0) {
			if (this.foodFeedCategoryList[idx] != null) {
				let {
					data: { list }
				} = await this.$api.GetFoodFeed({
					pageNum: 1,
					pageSize: 9999,
					feedTypeId: this.foodFeedCategoryList[idx].id
				});
				this.foodFeedList = list;
			}
		},

		async btnEditSubmitClick() {
			console.log('提交表单before', this.form);
			if (!(await umodal('确认要提交吗？'))) {
				return;
			}
			this.form.name = this.form.name.trim();

			if (this.form.name.length == 0) {
				await utoast('名称为空!', 'error');
				return;
			}
			if (this.foodCategoryList.length < 1) {
				await utoast('请先添加菜品分类!', 'error');
				uni.navigateTo({
					url: '/pages/workbench/foodcategory/doAdd'
				});
				return;
			}

			if (!this.form.foodTypeId) {
				await utoast('请选择菜品分类!', 'error');
				return;
			}

			// 如果是原料
			if (this.form.type != 2 && this.form.detail.isGoods && this.form.detail.goodsCategoryId == 0) {
				await utoast('商品分类为空!', 'error');
				return;
			}

			// bool 转为  0 和 1
			this.form.tasklist.forEach((item) => {
				item.selectType = item.isSelectType ? 1 : 0;
			});
			console.log('提交表单after', this.form);

			const res = this.mode == modeEnum.edit ? await EditFood(this.form) : await AddFood(this.form);
			if (res?.code == 0) {
				await utoast('操作成功');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/workbench/food/list'
					});
				}, 1000);
			} else {
				setTimeout(() => {
					console.log('fail', this.lock);
				}, 2000);
			}
		},

		async btnDelClick() {
			const res = await umodal();
			// 确定删除
			if (res) {
				const result = await DelFood(this.id);
				console.log(result);
				if (result.code != null && result.code == 0) {
					await utoast('删除成功！', toastIconEnum.success);
					this.disabled = true;
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/workbench/food/list'
						});
					}, 1000);
				} else {
					await utoast('删除失败！', toastIconEnum.error);
				}
			}
		},

		bindPickerFoodTypeIdChange(e) {
			this.form.foodTypeId = this.foodCategoryList[e.detail.value].id;
		},

		bindTypeChange(e) {
			this.form.type = this.foodTypeEnum[e.detail.value].id;
		},

		radioIsGoodsChange(e) {
			this.form.detail.isGoods = e.detail.value;
		},

		radioWeighTypeChange(e) {
			this.form.detail.weighType = e.detail.value;
		},

		radioSellStatusChange(e) {
			this.form.sellStatus = e.detail.value;
		},

		radioMallStatusChange(e) {
			this.form.mallStatus = e.detail.value;
		},

		radioIsChangePriceChange(e) {
			this.form.detail.isChangePrice = e.detail.value;
		},

		radioIsDiscountChange(e) {
			this.form.detail.isDiscount = e.detail.value;
		},

		radioDepartTypeChange(e) {
			console.log('e', e);
			this.form.detail.departType = e.detail.value;
		},

		pickerDepartIdChange(e) {
			this.form.detail.departId = this.departmentList[e.detail.value].id;
		},

		pickerWarrantyTypeChange(e) {
			this.form.detail.warrantyType = this.warrantyTypeList[e.detail.value].value;
		},
		pickerSelectTypeChange(e) {
			if (this.type == 'add') {
				this.AddTaoCaiCataForm.selectType = this.FoodPackSelectTypeEnum[e.detail.value].value;
			} else if (this.type == 'edit') {
				this.editTCFZForm.selectType = this.FoodPackSelectTypeEnum[e.detail.value].value;
			}
		},

		pickerOrganizationIdChange(e) {
			this.form.organizationId = this.sysOrganizationList[e.detail.value].id;
			console.log(this.form.organizationId);
			console.log(this.sysOrganizationList.find((item) => item.id == this.form.organizationId).name);
		},

		radioPointTypeChange(e) {
			this.form.detail.pointType = e.detail.value;
		},

		radioIsShowChange(e) {
			this.form.detail.isShow = e.detail.value;
		},
		radioIsDefaultChange(e) {
			this.AddSpecItem.isDefault = e.detail.value;
		},

		radioIsSelectSameChange(e) {
			this.AddTaoCaiCataForm.isSelectSame = e.detail.value;
		},

		async uploadFoodImage() {
			const res = await uploadImage();
			this.form.detail.image = res;
			console.log('jsonData-->', this.form.detail.image);
		},

		async btnImgDeleteClick() {
			const res = await umodal('确定要删除图片吗？');
			if (res) {
				this.form.detail.image = '';
			}
		},

		async specAddClick() {
			this.type = 'add';
			this.show = true;
		},

		async btnEditClick() {
			this.type = 'edit';
			this.show = true;
		},

		async btnAddClick() {
			// 新增数据
			if (this.type == 'add') {
				const res = checker.check(this.AddSpecItem, this.rules);
				if (!res) {
					await utoast(checker.error, 'none');
					return;
				} else {
					if (this.form.speclist.length == 0) {
						this.AddSpecItem.isDefault = true;
					}

					if (this.AddSpecItem.isDefault) {
						this.form.speclist.forEach((element) => {
							element.isDefault = false;
						});
					}
					this.form.speclist = JSON.parse(JSON.stringify([...this.form.speclist, this.AddSpecItem]));
					this.show = false;
				}
			} else {
				//  编辑
				const res = checker.check(this.EditSpecItem, this.rules);
				if (!res) {
					await utoast(checker.error, 'none');
					return;
				} else {
					this.form.speclist[this.curSpecIdx] = this.EditSpecItem;
					this.show = false;
				}
			}
		},
		async btnAddOrEditTCFZClick() {
			// 新增
			if (this.type == 'add') {
				const res = checker.check(this.AddTaoCaiCataForm, this.txfzRules);
				console.log('AddTaoCaiCataForm', this.AddTaoCaiCataForm);
				if (!res) {
					await utoast(checker.error, 'none');
					return;
				} else {
					this.form.packlist.push(JSON.parse(JSON.stringify(this.AddTaoCaiCataForm)));
					this.showPack = false;
				}
			} else {
				//  编辑
				const res = checker.check(this.editTCFZForm, this.txfzRules);
				if (!res) {
					await utoast(checker.error, 'none');
					return;
				} else {
					this.form.packlist[this.curTCFZIdx] = JSON.parse(JSON.stringify(this.editTCFZForm));
					this.showPack = false;
				}
			}
		},
		afterChooseImage(e) {
			this.form.detail.image = e.imgSrc;
		},
		deleteImg(e) {
			this.form.detail.image = '';
		},
		setDefaultClick(index) {
			this.form.speclist.forEach((item) => {
				item.isDefault = false;
			});
			this.form.speclist[index].isDefault = true;
		},

		open() {
			this.show = true;
		},

		close() {
			this.show = false;
		},
		openShowCata() {
			this.showCata = true;
		},
		closeShowCata() {
			this.showCata = false;
		},
		closePack() {
			this.showPack = false;
		},
		openPack() {
			this.showPack = true;
		},

		closePopupAddTask() {
			this.showAddTask = false;
		},
		async openPopupAddTask() {
			this.foodTaskList = [];
			this.showAddTask = true;
			await this.GetFoodTaskCategory();
		},

		closePopupAddFood() {
			this.showAddFood = false;
		},
		openPopupAddFood() {
			this.showAddFood = true;
		},

		btnDelItemClick(idx) {
			this.form.speclist.splice(idx, 1);
		},

		btnDelTaskItemClick(idx) {
			this.form.tasklist.splice(idx, 1);
		},

		btnDelFeedItemClick(idx) {
			this.form.feedlist.splice(idx, 1);
		},

		btnEditSpecClick(index) {
			this.curSpecIdx = index;
			this.EditSpecItem = this.form.speclist[index];
			this.type = 'edit';
			this.show = true;
		},

		// 树选择器确定回调事件
		treeConfirm(e) {
			console.log(e);
			this.form.detail.goodsCategoryId = e[0].id;
			this.form.detail.goodsCategoryName = e[0].name;
		},

		foodCategoryTreeConfirm(e) {
			console.log(e);
			this.form.foodTypeId = e[0].id;
			this.form.foodTypeName = e[0].name;
		},

		addPackage() {
			this.type = 'add';
			this.AddTaoCaiCataForm.selectType = 2;
			this.showPack = true;
		},

		async delCataClick(idx1) {
			if (await umodal()) this.form.packlist.splice(idx1, 1);
		},

		editCataClick(idx1) {
			this.editTCFZForm = JSON.parse(JSON.stringify(this.form.packlist[idx1]));
			this.curTCFZIdx = idx1;
			this.type = 'edit';
			this.showPack = true;
		},

		async addFoodClick(idx1) {
			this.packIdx = idx1;
			this.foodCategoryId = this.foodCategoryList[0].id;
			const res = await GetFood({
				pageNum: 1,
				pageSize: 9999,
				foodCategoryId: this.foodCategoryList[0].id
			});

			this.foodList = res.data.list.filter((item) => item.type == 1);
			console.log('this.foodList', this.foodList);

			this.showAddFood = true;
		},

		btnDelTaocaiItemClick(idx1, idx2) {
			this.form.packlist[idx1].packdetails.splice(idx2, 1);
			console.log('删除套菜项');
		},
		btnEditTaocaiClick(idx1, idx2) {
			this.showEditFood = true;
			this.packIdx = idx1;
			this.packdetailsIdx = idx2;
			this.editFoodForm = JSON.parse(JSON.stringify(this.form.packlist[idx1].packdetails[idx2]));
		},

		unfold(index) {
			console.log(index);
			/*       console.log(index);
      console.log("this.foodCategoryList[index]", this.foodCategoryList[index]);
      let newObj = JSON.parse(JSON.stringify(this.foodCategoryList[index]));
      newObj.fold = !newObj.fold;
      this.foodCategoryList[index] = newObj; */
			// this.foodCategoryList[index].fold = !this.foodCategoryList[index];
		},
		/**
		 * GoodCategoryList Item Click Event
		 */
		async onItemClick(item) {
			console.log(item, 'item');
			if (this.foodCategoryId == item.id) return;
			const res = await GetFood({
				pageNum: 1,
				pageSize: 9999,
				foodCategoryId: item.id
			});
			this.foodCategoryId = item.id;
			this.foodList = res.data.list.filter((item) => item.type == 1);
			// this.foodList = res.data.list;
			//  send Request  GoodsList
		},

		async showfoodDetailModal(food) {
			const packlistEntry = this.form.packlist[this.packIdx];
			const packdetails = packlistEntry.packdetails;
			const existingItem = packdetails.find((item) => item.foodId == food.id);

			if (existingItem) {
				existingItem.quantity += 1;
			} else {
				packdetails.push({
					foodId: food.id,
					foodSpecId: food.foodSpecId,
					quantity: 1.0,
					setPrice: food.posPrice,
					foodName: food.name,
					specName: food.foodSpecName
				});
			}

			this.showAddFood = false;
			await utoast('菜品添加成功', toastIconEnum.success);
		},

		closePopShowEditFood() {
			this.showEditFood = false;
		},

		openPopupShowEditFood() {
			this.showEditFood = !false;
		},

		closePopupAddFeed() {
			this.showAddFeed = false;
		},

		async openPopupAddFeed() {
			this.foodFeedList = [];
			await this.GetFoodFeedCategory();
			this.showAddFeed = !false;
		},

		btnSaveFoodClick() {
			this.form.packlist[this.packIdx].packdetails[this.packdetailsIdx] = JSON.parse(JSON.stringify(this.editFoodForm));
			this.showEditFood = false;
		},
		onTabClick(item) {
			this.current = item.value;
		},
		async onEditImage() {
			// 上传图片的方法
			const res = await uploadImageUtils.checkedActionSheet(['网络搜图', '本地上传', '删除图片']);
			console.log(res);
			if (res.tapIndex === 0) {
				uni.navigateTo({
					url: `/pages/workbench/recognition/checkedImage`
				});
				this.setCurrentGoods({
					index: 0,
					ind: 0,
					imageUrl: this.form.detail.image,
					foodName: this.form.name,
					from: '/pages/workbench/food/doEdit',
					createList: [],
					foodList: [],
					form: this.form
				});
			} else if (res.tapIndex === 1) {
				const img = await uploadImageUtils.chooseImage(1);
				const imgResult = await uploadImageUtils.uploadImage(img);
				this.form.detail.image = imgResult;
			} else {
				this.form.detail.image = '';
			}
		}

		// 方法放上面
	}
};
</script>
<style lang="scss" scoped>
.container {
	height: 100%;
	// overflow-y: scroll;
	// padding-bottom: 100px;

	::v-deep .u-checkbox {
		margin-right: 10px;
	}

	.spec-container {
		background-color: #fff;
		border-radius: 10px;
		margin: 0 0 10px;
		padding: 8px 4px;

		.spec-header {
			padding: 10px;
			border-bottom: 1px solid #ededed;
			display: flex;
			justify-content: space-between;
		}

		.spec-body {
			// padding: 15px 10px;
			// border: 2rpx solid #cacaca;

			.items {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 12px;
				border-bottom: 1px solid #cacaca;
				padding: 8px 0;
				&:last-child {
					border-bottom: none;
				}

				.is-default {
					width: 80px;
					display: flex;
					justify-content: center;
					color: #000;
					background-color: #fff;
					.is-default-active {
						color: #fff;
						background-color: #fdc31d;
						border: 1px solid transparent;
					}
				}

				.spec-name {
					flex: 1;
					display: flex;
					justify-content: center;
					&.task-price {
						width: 80px;
					}
				}

				.price {
					width: 80px;
					display: flex;
					justify-content: center;
					&.task-option {
						width: 70px;
					}
				}

				.btns {
					width: 90px;
					display: flex;
					justify-content: center;
					&.task-btn {
						width: 70px;
						font-size: 12px;
					}
				}
				.edit-btn {
					// border: 1px solid #f76409;
					// padding: 12rpx 12rpx;
					// border-radius: 5rpx;
					padding: 5rpx 10rpx;
					border-radius: 25rpx;
					color: #f76409;
					font-size: 22rpx;
				}
				.btn {
					// border: 1px solid #c3c3c2;
					// padding: 12rpx 12rpx;
					// border-radius: 5rpx;
					padding: 5rpx 10rpx;
					border-radius: 25rpx;
					color: #c3c3c2;
					font-size: 22rpx;
					&.btn-del {
						color: #b3b3b3;
						padding: 5rpx 10rpx;
						font-size: 22rpx;
						border-radius: 25rpx;
						// border: 1px solid #c3c3c2;
						// background-color: #f56c6c;
					}
				}
			}
		}
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 14rpx 0;

		.lbl {
			width: 80px;
			font-size: 14px;
		}

		.lbl-title {
			font-weight: 600;
			flex: unset;
			font-size: 16px;
			flex: 1;
			width: fit-content;
		}

		.form-item-right {
			flex: 1;

			.close-icon {
				position: absolute;
				top: -10px;
				left: 190px;
			}
		}

		.tree,
		picker {
			flex: 1;
			border: 1px solid #cacaca;
			background-color: #fff;
			padding: 7rpx 10rpx;
			border-radius: 5px;
			position: relative;
		}
	}

	.img {
		width: 20px;
		height: 20px;
	}

	.fold {
		display: flex;
	}

	.food-items {
		display: flex;
		padding: 5px;
		border: 1px solid #cacaca;
		border-radius: 8px;
		margin-bottom: 10px;
		margin-right: 10px;
		margin-left: 10px;
		.image {
			width: 160rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			background-color: $bg-color-grey;
		}

		.right {
			flex: 1;
			// height: 160rpx;
			// overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			border-bottom: 1px #f8f8f8 solid;
			padding-bottom: 20rpx;

			.label {
				display: flex;
				margin-top: 10rpx;

				text {
					display: inline-block;
					padding: 0 8rpx;
					font-size: 20rpx;
					border: 1px #f3c45d solid;
					border-radius: 8rpx;
					margin-right: 10rpx;
				}
			}

			.btn {
				display: flex;
				margin-top: 10rpx;

				text {
					display: inline-block;
					padding: 4rpx 16rpx;
					font-size: 24rpx;
					border: 1px #333 solid;
					border-radius: 8rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.btn-yellow {
		text-align: center;
		font-size: 14px;
		background-color: #f3c45d;
		color: #fff;
		border-radius: 0;
	}

	.btn-group {
		display: flex;
		align-items: center;
		position: fixed;
		background-color: #fff;
		left: 0;
		right: 0;
		bottom: 0;
		height: 70px;
		z-index: 666;
		.btn-save {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
			height: 49px;
			font-size: 18px;
			margin: 0 15px;
			background-color: #f3c45d;
			letter-spacing: 3px;
			color: #fff;
			font-weight: bold;
			border-radius: 10px;
		}
	}
}
.decoration {
	height: 30rpx;
	width: 4rpx;
	background-color: #f3c45d;
	border: 10rpx;
	margin-right: 20rpx;
	margin-left: -10rpx;
}
.btn-box {
	width: 70%;
	margin: 10px auto;
	border-radius: 35rpx;
	overflow: hidden;
	height: 70rpx;
}
</style>